<template>
  <div class="shoppingCart" :class='{shoppingCartActive:popupVisible,shopCartActive:download}'> 
      <download @close-down='closeDowns' v-if='download'></download>       
      <x-header title="购物车" :left-options="{backText: ''}" class='whiteHeader'>
          <a slot="right" @click="goMsgCenter">
            <img src="../../assets/image/homepage/messageActive.png" alt="" />
          </a>
      </x-header>
      <!--有购物车 start-->
      <div class="shoppingInfo" v-if="length!=0"  v-for="item in allShop">
          <div class="goodsInfo">
              <div class="goodsInfoTop">
                  <div class="circle" @click="selectCompId(item[0].COMP_ID)">                      
                      <span :class="{noSelect:true,select:item[0].sFlag==1}"></span>  
                  </div>
                  <div class="shop">
                      <!--<img src="../../assets/image/shopping/shop.png" alt="" />-->
                      <p>{{item[0].SHOP_NAME}}</p>
                  </div>
                  <div class="operation" @click="edit(item[0].COMP_ID)">
                      <p v-if='item[0].edit==0'>编辑</p>                                                                  
                      <p v-else>完成</p>                                                                  
                  </div>
              </div>
              <div class="goodsInfoBottom"  v-for="items in item">
                  <div class="goodsBottomList" >
                        <div class="circle" @click="selectOne(items.CART_ID,items.COMP_ID)">
                            
                            
                            <span :class="{noSelect:items.flag==0,select:items.flag==1}"></span> 
                        </div>                      
                        <div class="goods" @click="goShopDetail(items.edit,items.SERV_ID)">                      
                            <img :src="shopGoodsImg+items.IMG" alt="" />
                        </div>
                        <!--非编辑start-->
                        <div class="goodsExplain" v-if='items.edit==0' @click="goShopDetail(items.edit,items.SERV_ID)">                      
                            <div class="goodsText">
                                <p>{{items.SERV_NAME}}</p>                          
                            </div>
                            <div class="allAttr">
                              <div class="goodsAttr" v-for='ii in items.ATTR_ARRAY'>
                                  <p>{{ii.TYPE}}:</p>                                    
                                  <span v-if='iii.IS_CHOOSE==1' v-for='iii in ii.ATTRIBURE'>{{iii.SERV_NAME}}</span>         
                              </div>
                            </div>                                   
                            <div class="goodsPrice">
                                <p>￥<font>{{items.SERV_PRICE}}</font></p>
                                <span class="num">×{{items.QUANTITY}}</span>                         
                            </div>
                        </div>   
                        <!--非编辑end-->
                        <!--编辑start-->
                        <div class="goodsExplain" v-if='items.edit==1' @click='editAttr(items.CART_ID,items.COMP_ID)'> 
                            <div class="editLeft"> 
                          		<div class="goodsPriceEdit">                                
                                  <div class="plusNum">
                                      <div class="numDown" @click.stop="numDown(items.CART_ID,items.COMP_ID)">
                                          <p>-</p>
                                      </div>
                                      <div class="nums">
                                          <p>{{items.QUANTITY}}</p>                                   
                                      </div>
                                      <div class="numUp" @click.stop="numUp(items.CART_ID,items.COMP_ID)">
                                          <p>+</p>
                                      </div>
                                  </div>                      
                              </div>
                              <div class="allAttrEdit">
                                <div class="goodsAttrEdit" v-for='ii in items.ATTR_ARRAY'>                                
                                    <p>{{ii.TYPE}}:</p>                                    
                                    <span v-if='iii.IS_CHOOSE==1' v-for='iii in ii.ATTRIBURE'>{{iii.SERV_NAME}}</span><label></label>                           
                                </div>
                              </div>
                            </div>
                            <button @click.stop="shoppingRemove(items.CART_ID,items.COMP_ID)">删除</button>
                        </div>  
                        <!--编辑end-->
                  </div>                                        
                                    
              </div>
          </div>
      </div>
      
      <!--有购物车 end-->
      
    <!--空购物车 start-->
      <div class="emptyInfo" v-if="length==0&&times==0.5">      
          <div class="emptyShopping" >
                <img src="../../assets/image/shopping/emptyShopping1.png" alt="" />
          </div>
          <div class="shopText1">
              <p>您的购物车还是空的&thinsp;~</p>
          </div>
          <div class="shopText2">
                <p>添加几件商品到您的购物车吧!</p>
          </div>
          <div class="shopText3" @click='goProduct'>
                <p>去逛逛</p>
          </div>
      </div>
      <!--空购物车 end-->
      
      <div class="footer" v-if="length!=0">
          <div class="circle" @click="allSelect">                        
              <span :class="{noSelect:true,select:isAll}"></span>               
          </div>
          <div class="selectAll" >
              <p v-if='!isAll'>全选</p>              
              <p v-else>反选</p>              
          </div>
          <div class="totalPrice">
              <p>合计:&nbsp;<b>￥</b><span>{{totalPrice | filterMoney}}</span><font>.{{totalPrice | filterMoney1}}</font></p>
          </div>
          <div class="accounts" @click="goPay">
              <p>结算</p>
          </div>
      </div>
      <!--猜您喜欢-->
      <!--<div class="youLike" v-if="timess==1&&youLikeData.length!=0">
                <div class="youLikeTitle">
                    <img src="../../assets/image/mine/like.png" alt="" />
                </div>
                <div class="youLikeAll">
                    <div class="youlikeList" v-for="item in youLikeData" @click="goDetail(item.SERV_ID)">
                        <img :src="item.COVER_IMG" alt="" />    
                        <h2>{{item.REMARK}}</h2>
                        <h3>{{item.SERV_SUBJECT}}</h3>
                        <p>¥{{item.PRICE}}</p>
                        <img src="../../assets/image/home/shopCar.png" alt="" />
                    </div>
                </div>
      </div>-->
      <div class="carPro" v-show="youLikeData.length!=0">
				<h1>
                <img src="../../assets/image/mine/like2.png" alt="" />
              </h1>
				<div class="allProduct">
					<div class="listItem productBorder" v-for='item in youLikeData' @click='goDetail(item.SERV_ID)'>
						<img :src="item.COVER_IMG" alt="" />
						<p>{{item.REMARK}}</p>
						<h2>{{item.SERV_SUBJECT}}</h2>
						<div class="price">
							<span>￥{{item.PRICE}}</span>
							<img src="../../assets/image/home/shopCar.png" alt="" />
						</div>
					</div>
				</div>
			</div>
      <!-- 点击编辑单个属性 -->
      <mt-popup v-model="popupVisible" position='bottom'>
          <div class='carAttr'>
              <div class='attrTop'>
                  <div class='attrImg'>
                      <img :src="shopGoodsImg+editShop.IMG" alt='' />
                  </div>
                  <div class='attrText'>
                      <div class='attrPrice'>
                          <p>￥{{editShop.SERV_PRICE}}</p>
                      </div>
                      <div class="attrShows">
                      		<div class="attrSelected">
                      		<p>已选择:</p>
		                      </div>
		                      <div class='attrColors' v-for='items in editShop.ATTR_ARRAY'>                          		
		                          <p v-if="item.IS_CHOOSE==1" v-for="item in items.ATTRIBURE">{{item.SERV_NAME}}</p>
		                      </div>
                      </div>
                      
                  </div>
                  <div class='attrUndo' @click="close">
                      <img src='../../assets/image/close.png' alt='' />
                  </div>
              </div>
              <div class='attrChange'>
                  <div class='changeUp' v-for='items in editShop.ATTR_ARRAY'>
                      <div class='upColor' >
                          <p >{{items.TYPE}}</p>
                      </div>
                      <div class='changeColors'>
                          <div class='cls' :class="{bRed:item.IS_CHOOSE==1}" v-for='item in items.ATTRIBURE' @click="selColors(item.SERV_ID,items.TYPE)">
                                <p :class="{textWhite:item.IS_CHOOSE==1}">{{item.SERV_NAME}}</p>                          
                          </div>
                      </div>
                  </div>                  
              </div>
              <div class='attrButton' @click="ensure(editShop.CART_ID)">
                  <p>确定</p>
              </div>
          </div>
      </mt-popup>         
  </div>
    
</template>

<script>
// 我的模块
import {getCookie} from '../../util/commonUtils';
import {XHeader,Alert,Toast} from 'vux';
import { MessageBox,Popup ,Spinner } from 'mint-ui';
import download from '../../components/download';
export default {
  name:"shoppingCart",
  // 数据
  data(){
    return{          
        isShopping:true,//是否购物    
        noSelected:true,//是否选中                               
        userId:'',//用户id        
        length:'',//数据长度
        allShopMess:'',  //所有购物信息,即res        
        shopGoodsImg:'',//商品图片主URL，还得拼接
        arrServId:[],//商品id数组        
        selectedId:[],//选中的商品id
        selectedCompId:[],//选中的compid
        arrCompId:[],//商店id数组                     
        totalPrice:0,//合计
        ototalPrice:0,//初始合计，用来改变全选图标            
        test:true,//全局测试      
        isAll:false,//全选 
        operation:'编辑',//编辑 or 完成
        selectedCartId:'',//选中的商品id
        allShop:{},//所有商品（已重组）    
        oNum:1,//初始数量        
        popupVisible:false,//编辑弹出框
        showEditBtn:false,//是否显示编辑成功弹窗
        editShop:'',//编辑时的商品
        isRed:false,//编辑选择商品时的颜色        
        youLikeData:'',//猜您喜欢
        times:0,//时间,用来控制显示顺序
        timess:0,//时间,用来控制显示顺序        
        isInt:true,//是否是整数
        download:true 
    }
  },
  components:{
    	XHeader,
    	Alert,
    	Toast,
    	download
  },
  // 计算属性
  computed:{
      
  },
  // 创建（实例创建完成）
  created(){
    //请求实例
    this.userId=getCookie('loginkey');
    //this.userId = 137038;
    if(this.userId){//登录情况下
        sessionStorage.setItem('returnLink','shopCar');
        this.$router.push('/shoppingCart');
    }else{
        this.$router.push('/login');
        return;
    }
    if(!sessionStorage.getItem('closeDown')){
      this.download=true;
    }else{
      this.download=false;
    }               
    setTimeout(()=>this.times=0.5,500);
    setTimeout(()=>this.timess=1,1000);//控制显示顺序,有购物车->空购物车->猜你喜欢    
    //获取用户购物车列表    
    this.$fetchGet('/ShoppingCartWeb/getShopCart',{USER_ID:this.userId}).then(res=>{            
        if(res.STATUS_CODE==1){   
        	//console.dir(res);
          this.allShopMess=res;
          this.shopGoodsImg = res.IMG_URL;   
          let strCompId = res.COMP_IDS;
          this.arrCompId = strCompId.split(',');  
          //重组对象（根据COMP_ID）
          let arr=res.RESULT_DATA;
          for(let i=0;i<arr.length;i++){
            //判断商品是否选中 0-未选中 1-已选中
            this.$set(arr[i],'flag',0);
            //判断商店是否选中 0-未选中 1-已选中
            this.$set(arr[i],'sFlag',0);   
            //是否编辑0-否1-是
            this.$set(arr[i],'edit',0);
            if(this.allShop.hasOwnProperty(arr[i].COMP_ID)){
              this.allShop[arr[i].COMP_ID].push(arr[i]);
            }else{
              this.allShop[arr[i].COMP_ID]=[arr[i]];
            }
          }    
          //console.dir(this.allShop);
          //数据长度
          this.length = arr.length;          
          //初始总价格
          let arrNew = this.allShop,k='';
          this.totalPrice = 0;
          for(k in arrNew){                
            for(let i=0;i<arrNew[k].length;i++){                                                                           
                    let arrAttr = arrNew[k][i].ATTR_ARRAY;
                	  //商品价格计算
                	  this.ototalPrice += parseFloat(arrNew[k][i].SERV_PRICE*arrNew[k][i].QUANTITY);         
                	  		//多规格单价计算
                	  	  let sum=0;
                	  	  let summ=0;
                	  		for(let j=0;j<arrAttr.length;j++){
	                	  	 let arrBure = arrAttr[j].ATTRIBURE;	                	  	 
	                	  	 for(let l=0;l<arrBure.length;l++){	                	  	 		
	                	  	 		if(arrBure[l].IS_CHOOSE == 1){	                	  	 				                	  	 					                	  	 				     
              	  							sum+= parseFloat((arrBure[l].PRICE)*arrNew[k][i].QUANTITY);  
              	  							summ += parseFloat(arrBure[l].PRICE);
	                	  	 		} 
	                	  	 }	                	  	
	                	  	}
                	  		this.ototalPrice +=Number(sum);
                	  		let attrPrices = '';
                	  	  attrPrices += Number(summ);        
                	  	  arrNew[k][i].SERV_PRICE = parseFloat(arrNew[k][i].SERV_PRICE)+parseFloat(attrPrices);  
                	  		
            };            
          };                   
          //console.dir(this.allShop);
      }
    },err=>{
          console.log(err);
    }),        
    //猜您喜欢
        this.$fetchGet('/BrowHobbyWebAction/getbrowseHobby',{USER_ID:this.userId,pageNo:1}).then(res=>{
            if(res.STATUS_CODE == 1){
                this.youLikeData = res.RESULT_DATA.slice(0,6);
            }                  
        },err=>console.log(err));        
     
  },
  // el被创建，并挂载到实例上
  mounted(){
      
    
  },
  // 方法（实例中的方法）-----------
  methods:{
    closeDowns(val){
      this.download=false;
      sessionStorage.setItem('closeDown',1);
    },
    //去逛逛   
    goProduct(){
      this.$router.push('/carProduct');
    },
    //选择单个店COMP_ID
    selectCompId(cid){
        let arr=this.allShop[cid];
        for(let i=0;i<arr.length;i++){               
            if(arr[i].sFlag==0){
                this.$set(arr[i],'sFlag',1);                   
                arr[i].flag=1;
            }else{
                this.$set(arr[i],'sFlag',0);                
                arr[i].flag=0;
                this.isAll = false;
                this.isInt = true;
            };
        };        
        //计算总价格        
        let arrNew = this.allShop,k='';
        this.totalPrice = 0;
        for(k in arrNew){                
            for(let i=0;i<arrNew[k].length;i++){                                 
                if(arrNew[k][i].flag==1){
                    let arrAttr = arrNew[k][i].ATTR_ARRAY;
                	  //商品价格计算
                	  this.totalPrice += parseFloat(arrNew[k][i].SERV_PRICE*arrNew[k][i].QUANTITY);  
                	  //判断整数/小数
                	  if(Math.floor(this.totalPrice) !== this.totalPrice){
                	  	this.isInt = false;                	  	
                	  }                                                            
                    if(this.totalPrice==this.ototalPrice){
                        this.isAll = true;
                    }
                };                
            };            
        };   
        // console.dir(this.allShop);
    },
    //选择单个商品CART_ID
    selectOne(id,shopId){
        let arr=this.allShop[shopId]; 
        this.totalPrice = 0;
        for(let i=0;i<arr.length;i++){                               
            if(arr[i].CART_ID==id){                
                if(arr[i].flag==0){
                    this.$set(arr[i],'flag',1);                                     
                }else{
                    this.$set(arr[i],'flag',0);   
                    this.isAll = false;
                }                                    
            }
        };
        //商品与店的选择图标变化
        let flags=false;
        for(let i=0;i<arr.length;i++){                      
               if(arr[i].flag==0){
                   flags=true;
                   this.isInt = true;
                   break;
               }      
        };
        if(flags){
             for(let i=0;i<arr.length;i++){
                 this.$set(arr[i],'sFlag',0);
             }
        }else{
            for(let i=0;i<arr.length;i++){
                 this.$set(arr[i],'sFlag',1);
             }
        }
        //计算总价格        
        let arrNew = this.allShop,k='';
        // console.dir(arrNew);
        this.totalPrice = 0;        
        for(k in arrNew){                
            for(let i=0;i<arrNew[k].length;i++){                                 
                if(arrNew[k][i].flag==1){
                	  let arrAttr = arrNew[k][i].ATTR_ARRAY;
                	  //商品价格计算
                	  this.totalPrice += parseFloat(arrNew[k][i].SERV_PRICE*arrNew[k][i].QUANTITY);   
                	  //判断整数/小数
                	  if(Math.floor(this.totalPrice) !== this.totalPrice){
                	  	this.isInt = false;                	  	
                	  }                        
                    if(this.totalPrice==this.ototalPrice){
                        this.isAll = true;
                    }
                };                
            };            
        };        
        // console.log(this.allShop);
    },
    //全选，反选
    allSelect(){    		
        this.isAll = !this.isAll;
        let arr=this.allShop;        
        if(this.isAll){//全选                 
            let k='';                        
            this.totalPrice = 0;            
            for(k in arr){                
                for(let i=0;i<arr[k].length;i++){
                    this.$set(arr[k][i],'sFlag',1);
                    this.$set(arr[k][i],'flag',1);     
                    let arrAttr = arr[k][i].ATTR_ARRAY;
                	  //商品价格计算
                	  this.totalPrice += parseFloat(arr[k][i].SERV_PRICE*arr[k][i].QUANTITY);  
                	  //判断整数/小数
                	  if(Math.floor(this.totalPrice) !== this.totalPrice){
                	  	this.isInt = false;                	  	                	  	                	  	
                	  }                       	  
                	  		/*//多规格价格计算
                	  	  let sum=0;
                	  		for(let j=0;j<arrAttr.length;j++){
	                	  	 let arrBure = arrAttr[j].ATTRIBURE;	                	  	 
	                	  	 for(let l=0;l<arrBure.length;l++){	                	  	 		
	                	  	 		if(arrBure[l].IS_CHOOSE == 1){	                	  	 				                	  	 					                	  	 				     
              	  							sum+= parseFloat((arrBure[l].PRICE)*arr[k][i].QUANTITY); 					
	                	  	 		} 
	                	  	 }	                	  	
	                	  	}
                	  		this.totalPrice +=Number(sum);*/
                    //this.totalPrice += eval(arr[k][i].SERV_PRICE*arr[k][i].QUANTITY);                       
                };                
            };
        }else{//反选       
        		this.isInt = true;
            let k='';
            for(k in arr){                
                for(let i=0;i<arr[k].length;i++){
                    this.$set(arr[k][i],'sFlag',0);
                    this.$set(arr[k][i],'flag',0);
                    this.totalPrice = 0;
                }
            };
        }   
        //console.dir(this.allShop);
    },
    //编辑
    edit(shopId){        
        if(this.allShop[shopId][0].edit==0){
           for(let i=0;i<this.allShop[shopId].length;i++){
               this.$set(this.allShop[shopId][i],'edit',1);
           }                            
        }else{                                         
            //编辑用户购物车
            let obj = {};
            obj.USER_ID = this.userId;            
            obj.PARAMS = [];
            for(let i=0;i<this.allShop[shopId].length;i++){
               this.$set(this.allShop[shopId][i],'edit',0);
               //编辑请求数据
                let objs={};
                objs.CART_ID=this.allShop[shopId][i].CART_ID;
                objs.QUANTITY=this.allShop[shopId][i].QUANTITY;
                objs.ATTR_LIST=[];
                for(let j=0;j<this.allShop[shopId][i].ATTR_ARRAY.length;j++){
                    let objss={};
                    objss.TYPE=this.allShop[shopId][i].ATTR_ARRAY[j].TYPE;
                    for(let l=0;l<this.allShop[shopId][i].ATTR_ARRAY[j].ATTRIBURE.length;l++){
                        if(this.allShop[shopId][i].ATTR_ARRAY[j].ATTRIBURE[l].IS_CHOOSE==1){
                            objss.ATTRIBURE=this.allShop[shopId][i].ATTR_ARRAY[j].ATTRIBURE[l].SERV_ID;
                        }
                    }
                    objs.ATTR_LIST.push(objss);
                }
                obj.PARAMS.push(objs);
            }                                    
            let ob = {};
            ob.jsonParams = JSON.stringify(obj);            
            this.$fetchGet('/ShoppingCartWeb/edieShopCart',ob).then(res=>{            
                //console.dir(res);
            },err=>{
                   console.log(err);
            })          
        }                        
    },
    //关闭
    close(){
        this.popupVisible = false;
    },
    //加一
    numUp(id,shopId){               
        let arr=this.allShop;        
        for(let i=0;i<arr[shopId].length;i++){
            if(arr[shopId][i].CART_ID == id){
                let nums = arr[shopId][i].QUANTITY;
                nums++;
                this.$set(arr[shopId][i],'QUANTITY',nums);
                //console.dir(arr[shopId][i]);                
            }
        }
    },
    //减一
    numDown(id,shopId){
        let arr=this.allShop;        
        for(let i=0;i<arr[shopId].length;i++){
            if(arr[shopId][i].CART_ID == id){
                let nums = arr[shopId][i].QUANTITY;
                if(nums<=1){
                		this.$vux.alert.show({title:'提示',content:'商品不能少于一个!'});
                    this.$set(arr[shopId][i],'QUANTITY',1);
                } else {
                    nums--;                
                    this.$set(arr[shopId][i],'QUANTITY',nums);
                }                
                //console.dir(arr[shopId][i]);
            }
        }
    },
    //加一
    numUp1(id,shopId){         
        let arr=this.editShop;        
        let nums = arr.QUANTITY;
        nums++;
        this.$set(arr,'QUANTITY',nums);
        //console.dir(arr);
        
    },
    //减一
    numDown1(id){
        let arr=this.editShop;        
        let nums = arr.QUANTITY;
        if(nums<=0){
            this.$set(arr,'QUANTITY',1);
        }else{
            nums--;
            this.$set(arr,'QUANTITY',nums);
        }        
        //console.dir(arr);
    },
    //从底部弹框编辑属性
    editAttr(id,shopId){       
        let arr=this.allShop;
        for(let i=0;i<arr[shopId].length;i++){
            if(arr[shopId][i].CART_ID==id){
                this.editShop = arr[shopId][i];
            }
        }
        this.popupVisible=true;  
        // console.dir(this.editShop);
    },
    //改变颜色属性
    selColors(id,type){     
        let arr=this.editShop.ATTR_ARRAY;         
        for(let i=0;i<arr.length;i++){
        	if(arr[i].TYPE == type){//同类
        				let arr1=arr[i].ATTRIBURE;                
            		for(let j=0;j<arr1.length;j++){                
	                arr1[j].IS_CHOOSE = 0;    
	                if(arr1[j].SERV_ID == id){
	                    arr1[j].IS_CHOOSE = 1; //选中的商品为1
	                }
            		}  
        	}
                                  
       	}
    },
    //确定
    ensure(id){
        this.popupVisible = false;
    },
    //结算
    goPay(){        
        if(this.totalPrice === 0){            
            this.$vux.alert.show({title:'提示',content:'请选择商品!'});
            return ;
        }      
        //请求数据封装
        let obj={},arr=this.allShop,k='';
        // console.log(JSON.stringify(this.allShop));
        obj.USER_ID = this.userId;
        obj.ORDER_LIST = [];        
        for(let k in arr){
        		for(let i=0;i<arr[k].length;i++){
        				let objj={};
        				if(arr[k][i].flag == 1){
                    objj.COMP_ID = arr[k][i].COMP_ID;
        						objj.SHOP_NAME = arr[k][i].SHOP_NAME;
		        				objj.CASH_VOL_NO = '';        				
		        				objj.SERV_PARAMS = [];	
		        				// objj.ATTR_LIST = [];
		        				let objjj={};		        				
                    objjj.SERV_ID = arr[k][i].SERV_ID;                    
                    objjj.SERV_SUBJECT = arr[k][i].SERV_NAME;                    
		        				objjj.PRICE = arr[k][i].SERV_PRICE;		        				
		        				objjj.QUANTITY = arr[k][i].QUANTITY;
                    objjj.SUPP_CASH_VOL=arr[k][i].SUPP_CASH_VOL;
                    objjj.SUPP_DIS_VOL=arr[k][i].SUPP_DIS_VOL;
                    objjj.SUPP_NOR_CASH_VOL=arr[k][i].SUPP_NOR_CASH_VOL;
                    objjj.SERV_FIRST_CLASS=arr[k][i].SERV_FIRST_CLASS;
                    objjj.SERV_SECON_CLASS=arr[k][i].SERV_SECON_CLASS;			
		        				objjj.MARK = 1;
                    objjj.PRICE=Number(objjj.PRICE)
                    objjj.ATTR_LIST=[];
                    for(let j=0;j<arr[k][i].ATTR_ARRAY.length;j++){
                      for(let m=0;m<arr[k][i].ATTR_ARRAY[j].ATTRIBURE.length;m++){
                        if(arr[k][i].ATTR_ARRAY[j].ATTRIBURE[m].IS_CHOOSE==1){
                          let obj={};
                          obj.TYPE=arr[k][i].ATTR_ARRAY[j].TYPE;
                          obj.ATTRIBURE=String(arr[k][i].ATTR_ARRAY[j].ATTRIBURE[m].SERV_ID);
                          objjj.PRICE+=Number(arr[k][i].ATTR_ARRAY[j].ATTRIBURE[m].PRICE);
                          objjj.ATTR_LIST.push(obj);
                        }
                      }
                    }
		        				objj.SERV_PARAMS.push(objjj);		        				
		        				obj.ORDER_LIST.push(objj);

        				}        							
        		};        		       
      };
      sessionStorage.removeItem('userVoucher');//清除掉团长免单券
      sessionStorage.removeItem('orderMess');
      sessionStorage.removeItem('distribuVoucher');
      localStorage.removeItem('from');
      sessionStorage.setItem('shopMess',JSON.stringify(obj));//商品支付的数据
      this.$router.push('/shopPay');
      // console.dir(obj);
    },
    //移除购物车
    shoppingRemove(id,shopId){ 
        let that=this;
        this.$vux.confirm.show({
            title:'提示',
            content:'亲，你真的要删除该商品',
            onConfirm () {
              let arr=that.allShop[shopId];
              let newArr=arr.filter(function(item,key){
                  return item.CART_ID!=id;
              });
              //移除购物车               
              that.$fetchGet('/ShoppingCartWeb/removeShopCart',{USER_ID:that.userId,CART_ID:id}).then(res=>{          
                     if(res.STATUS_CODE == 1){       
                        let arr=that.allShop[shopId];
                        let newArr=arr.filter(function(item){
                            return item.CART_ID!=id;
                        });
                        if(newArr.length==0){
                          that.$delete(that.allShop,shopId);
                        }else{
                          that.$delete(that.allShop,shopId);
                          that.$set(that.allShop,shopId,newArr);
                        }
                     }
              },err=>{
                     console.log(err);
              })
            }
        }) 	    
    		
    },
    //消息中心
    goMsgCenter(){
    	this.$router.push('/msgCenter');
    },
    //商品详情
    goShopDetail(edit,id){    	
    		if(edit == 0){
    				this.$router.push('/shopDetail/'+id);
    		} else {
    			return;
    		}
    },    
   	//车品详情
		goDetail(id){
			this.$router.push('/shopDetail/'+id);
		},
		//去逛逛
		goCarpList(){
			this.$router.push('/carProduct');
		},
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped> 
    @import url('../../assets/css/public.less');
    [v-cloak]{
        display:none;
    }
    .noSelect{
            background:url('../../assets/image/shopping/circle.png') no-repeat;    
            background-size:0.41rem 0.41rem;
    }
    .select{
            background:url('../../assets/image/shopping/selected.png') no-repeat;                  
            background-size:0.37rem 0.37rem;
    }   
    
    .shoppingCart{
    		min-height:100%;
        background:#efeff4;
        padding-bottom: 1.75rem;       
        .shoppingHead{
            height:1.25rem;
            background:#e42e3b;
            display:flex;
            justify-content:center;
            .shoppingGoBack{
                width:0.6rem;
                height:1.25rem;                            
                img{
                        width:0.25rem;
                }
            }
            .shoppingCar{
                width:6.3rem;
                height:1.25rem;                            
                p{
                        width:6.3rem;
                        height:1.25rem;
                        font-size:0.30rem;
                        line-height:1.58rem;
                        color:#ffffff;
                }
            }
            .shoppingNews{
                width:0.6rem;
                height:1.25rem;                            
                img{
                        width:0.45rem;
                }
            }

        }
        .emptyInfo{           		
            background:#efeff4;
            border-top:0.8rem solid #efeff4;
            border-bottom: 0.1rem solid #efeff4;            
            .emptyShopping{                
                height:1.5rem;   
                display:flex;
                justify-content:center;
                img{                	
                    width:1.4rem;
                    height:1.4rem;
                    align-content:center;
                }
            }
            .shopText1{
                border-top:0.1rem solid #efeff4;
                width:100%;                
                font-size:0.25rem;
                letter-spacing:0.02rem;
                text-align:center;
                color:#8f8f8f;
                vertical-align:center;
            }
            .shopText2{
                width:100%;
                height:0.8rem;                
                font-size:0.25rem;
                letter-spacing:0.02rem;
                text-align:center;
                color:#8f8f8f;
                vertical-align:center;
            }
            .shopText3{
                width:30%;
                height:0.75rem;
                background:#ec393d;
                margin:0 auto;
                font-size:0.3rem;
                line-height:0.75rem;
                color:#fff;
                letter-spacing:0.02rem;
                text-align:center;
                margin-bottom:0.6rem;
                border-radius:0.06rem;
                vertical-align:center;
            }
        }
        .shoppingInfo{
            background:#efeff4;   
            margin-bottom: 0.17rem;
            .goodsInfo{                
                background:#ffffff;
                .goodsInfoTop{                    
                    height:0.88rem;
                    display:flex;
                    .borderBFu(#eeeeee);                   
                    .circle{
                        width:0.9rem;                         
                        display:flex;                        
                        justify-content:center;                                                
                        span{
                        		display:block;                        	  
                        		align-self:center;                          		
                        		margin-left:0.24rem;            
                            width:0.41rem;
                            height:0.41rem;                           	
                        }
                    }
                    .shop{
                        width:5.74rem;                        
                        display:flex;
                        padding-top:0.28rem;
                        margin-left:0.08rem;
                        img{
                            width:0.32rem;
                            height:0.29rem;
                        }
                        p{
                        		margin-left:0.12rem;
                            font-size:0.26rem;
                            color:#000;
                            height:0.326rem;
                            line-height:0.326rem;
                            text-align:left;
                        }
                    }
                    .operation{                                               
                        p{                            
                            font-size:0.26rem;
                            line-height:0.88rem;
                        }
                    }
                }
                .goodsInfoBottom{                        
                    display:flex;                      
                    flex-flow:column;                    
                    .goodsBottomList{                                                
                        width: 100%;
                        display:flex;  
                        height:2.05rem;
                        align-items:center; 
                        .circle{
                            width:0.9rem;                         
                            display:flex;
                            justify-content:center;                              
                            span{        
                            		display:block;                    
                                width:0.41rem;
                                height:0.41rem;                            
                                align-self:center;                               
                                margin-left: 0.26rem;     
                            }
                        }
                        .goods{                        
                            width:2rem;                            
                            display:flex;
                            justify-content:center;
                            margin-left: 0.2rem;

                            height: 1.76rem; 
                            .borderFu(#eeeeee,0.2rem);                 
                            img{
                                width:2rem;
                                height:1.76rem;  
                                align-self:center;
                                border-radius:0.1rem;
                                
                            }
                        }
                        .goodsExplain{                        
                            width:4.2rem;
                            height:2.05rem;                                                
                            display:flex;
                            flex-flow:column;
                            margin-left:0.22rem;
                            position:relative;                            
                            button{
                            	width:1rem;
                            	height:100%;
                            	border:0;
                            	position:absolute;
                            	top:0;
                            	right:0;
                            	background:#e42e3b;
                            	font-size:0.3rem;
                            	color:#fff;
                              border-bottom: 1px solid #edede9;  
                            }
                            
                            .editLeft{
                              width: 3.1rem;
                            }                 
                            .goodsText{                                		                                                                              
                                height:0.9rem;
                                display:flex;                                                         
                                padding-right: 0.2rem;                                                                   
                                p{                     
                                		/* align-self:center;  */          
                                    font-size:0.26rem;
                                    color:#333;
                                    text-align:left;  
                                    padding-top:0.17rem;                                     
                                    overflow : hidden;
																		text-overflow: ellipsis;
																		display: -webkit-box;
																		-webkit-line-clamp: 2;
																		-webkit-box-orient: vertical;                                  
                                }
                            }
                            .allAttr{
                              display: flex;
                              margin-top: 0.05rem;
                              .goodsAttr{   
                                  height:0.4rem;
                                  margin-right: 0.15rem;                                
                                  display:flex;                                   
                                  p{                                           		                                        
                                      font-size:0.22rem;                                    
                                      text-align:left;
                                      color:#a2a4ab;
                                      padding-top:0.1rem;
                                  }
                                  span{                                		                                     
                                      font-size:0.22rem;                                    
                                      text-align:left;
                                      color:#a2a4ab;
                                      padding-top:0.1rem;                                        
                                  }
                              }
                            }
                            .allAttrEdit{
                              display: flex;
                              width:3.2rem;
                              flex-wrap:wrap; 
                            }
                            .goodsAttrEdit{                     
                                margin-top:0.1rem;                                   
                                position:relative;
                                display: flex;
                                flex-wrap:wrap;
                                p{                                         
                                    font-size:0.24rem;                                    
                                    text-align:left;
                                    color:#a2a4ab;
                                }
                                span{                                               		                 		                                     
                                    font-size:0.24rem;                                    
                                    text-align:right;
                                    color:#a2a4ab;                                    
                                }
                                label{
                                    width: 0.13rem;
                                    height: 0.13rem;
                                    border:1px solid #999;
                                    margin:0.03rem 0 0.15rem 0.1rem;
                                    border-width: 1px 1px 0 0;
                                    transform:rotate(135deg);
                                    display: block;

                                }
                            }
                            .goodsPrice{ 
                                position: absolute;
                                bottom: 0.2rem;
                                width: 100%;  
                                display:flex;
                                justify-content:space-between;
                                align-items:center;
                                p{
                                    font-size:0.22rem;
                                    color:#e93b44;
                                    font-weight:bold;     
                                    font{
                                        font-size:0.26rem;
                                    }
                                }                                
                                span{
                                    font-size:0.26rem;
                                    color:#a2a4ab;                         
                                }
                                .num{                                  
                                    display:block;
                                    text-align:right;   
                                    margin-right:0.14rem;       
                                }  
                                .font1,.font2,.font3{
                                    display:block;
                                    width:0.8rem;
                                    height:0.4rem;
                                    border:1px solid #eeeded;                                
                                    text-align:center;
                                    line-height:0.4rem; 
                                }    
                                .plusNum{
                                    width:1.5rem;
                                    height:0.4rem;
                                    background:pink;
                                    position:absolute;                              
                                    right:0;
                                    bottom:0.08rem;
                                    display:flex;
                                    .numDown{
                                        width:0.5rem;
                                        height:0.4rem;                                    
                                        display:flex;
                                        flex-flow:column;
                                        position:relative;
                                        border:1px solid #666666;
                                        p{                                        
                                            font-size:0.24rem;                                        
                                            position:absolute;
                                            left:0.17rem; 
                                            top:0.02rem;
                                        }
                                    }
                                    .nums{
                                        width:0.5rem;
                                        height:0.4rem;                                    
                                        position:relative;
                                        border-top:1px solid #666666;
                                        border-bottom:1px solid #666666;
                                        p{                                    
                                            font-size:0.24rem;
                                            position:absolute;                                            
                                            left:0.15rem;
                                            top:0.05rem;
                                        }
                                    }
                                    .numUp{
                                        width:0.5rem;
                                        height:0.4rem;
                                        position:relative;
                                        border:1px solid #666666;
                                        p{
                                            font-size:0.24rem;
                                            position:absolute;
                                            left:0.17rem;
                                            top:0.02rem;
                                        }
                                    }
                                }
                            }
                            
                            .goodsPriceEdit{                                                    
                                display:flex;
                                margin-top:0.1rem;                               	
                                p{
                                    font-size:0.22rem;                                    
                                    color:#e93b44;
                                    font{
                                        font-size:0.26rem;
                                    }
                                }                                
                                span{
                                    font-size:0.22rem;
                                    color:#a2a4ab;                                                                 
                                    text-align:right;                                
                                    width:2rem;
                                    display:flex;                           
                                }
                                .num{                                  
                                    display:block;
                                    text-align:right;                                    
                                    margin-right:0.14rem;                                   
                                }   

                                .font1,.font2,.font3{
                                    display:block;
                                    width:0.8rem;
                                    height:0.4rem;
                                    border:1px solid #eeeded;                                
                                    text-align:center;
                                    line-height:0.4rem; 
                                }    
                                .plusNum{
                                    width:3.3rem;
                                    height:0.5rem;                                                    
                                    margin-bottom: 0.1rem;                 
                                    display:flex;
                                    .numDown{
                                        width:0.6rem;
                                        height:0.5rem; 
                                        line-height: 0.5rem;
                                        margin-right: 0.1rem;                                               
                                        .borderFu(#eeeeee,0rem);  
                                        p{                                        
                                            font-size:0.32rem;    
                                            color:#999;                                                                                
                                        }
                                    }
                                    .nums{
                                        width:1.2rem;
                                        height:0.5rem; 
                                        line-height: 0.5rem;
                                        .borderFu(#eeeeee,0rem);
                                        p{                                    
                                            font-size:0.28rem; 
                                            color:#666;                                             
                                        }
                                    }
                                    .numUp{
                                        width:0.6rem;
                                        height:0.5rem; 
                                        line-height: 0.5rem;
                                        margin-left: 0.1rem;                                               
                                        .borderFu(#eeeeee,0rem);                             
                                        p{
                                            font-size:0.32rem; 
                                            color:#666;                                             
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }   
        .blank{
            width:100%;
            height:2.5rem;
            background:#efeff4;
        }     
        .footer{            
            width:7.5rem;
            height:0.88rem;
            background:#fff;
            display:flex;               
            position:fixed;
            bottom:0.9rem;
            z-index:9;
            .circle{       
                width:0.9rem;
                display:flex;   
                justify-content:center;                
                span{
                		display:block;                        
                    margin-left:0.24rem;
                    width:0.41rem;
                    height:0.41rem;                            
                    align-self:center;
                }
            }
            .selectAll{              
                display:flex;   
                justify-content:center;
                p{
                    align-self:center;
                    font-size:0.26rem;                    
                }
            }
            .totalPrice{
                width:3.7rem;
                display:flex;
                justify-content:flex-end;                                
                p{
                    align-self:center;
                    font-size:0.22rem;    
                    font-weight:bold;                   
                    b,font{
                        color:#e42031;
                        font-size:0.22rem;
                        font-weight:bold;
                    }
                    span{
                        color:#e42031;
                        font-size:0.34rem;
                    }
                }    
            }
            .accounts{                
                width:2rem;
                height:0.88rem;
                background:#e42e3b;
                position:absolute;                
                right:0;
                p{                    
                    font-size:0.30rem;
                    color:#ffffff;
                    text-align:center;  
                    line-height:0.88rem; 
                }
            }
        }
        .carPro {
				background: #fff;
				margin-bottom: 0.16rem;
				h1 {
					height: 0.8rem;
					line-height: 0.8rem;
					display: flex;
					align-items: center;
					padding-left: 0.2rem;
					justify-content:center;
					img {
						align-self: center;
						width: 2rem;
						height: 0.29rem;
					}
				}
				.allProduct {
					display: flex;
					justify-between: space-around;
					flex-wrap: wrap;
					.listItem {
						padding: 0rem 0 0.05rem 0;
						margin: 0 0.1rem 0.1rem 0.175rem;
						box-sizing: border-box;
						img {
							width: 3.5rem;
							height: 3rem;
							background: #f7f7f7;
							display: block;
						}
						h2 {
							width: 3.5rem;
							margin-top: 0.2rem;
							font-size: 0.26rem;
							line-height: 0.4rem;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
							color: #222;
						}
						p {
							font-size: 0.22rem;
							z-index: 2;
							height: 0.5rem;
							line-height: 0.5rem;
							position: relative;
							width: 3.46rem;
							margin: 0 auto;
							background: #f7f7f7;
							color: #EC2121;
						}
						.price {
							width: 3.5rem;
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							padding: 0.15rem 0.2rem 0.05rem 0.2rem;
							img {
								width: 0.4rem;
								height: 0.35rem;
								background: #fff;
							}
							span {
								font-size: 0.25rem;
								color: #e84632;
								padding-right: 0.15rem;
								font-weight: bolder;
							}
						}
					}
					.listItem:nth-child(2n) {
						padding: 0rem 0rem 0.1rem 0;
						margin: 0 0.175rem 0.1rem 0;
					}
				}
			}
			/*边框一像素*/
    .productBorder{
      position:relative;
    }
    .productBorder::after {
      content: "";
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      transform:scale(0.5,0.5);
      transform-origin:0 0;
      border: 1px solid #e1e2df;
    }
        .youLike{
                background:#ffffff;                                   
                .youLikeTitle{    
                	display:flex;	
									justify-content:center;                                                                                       
                        img{
                        		align-self:center;			
														width: 7.2rem;
														height: 0.6rem;	
                        }
                }
                .youLikeAll{
                        width:100%;
                        background:#ffffff;
                        display:flex;
                        flex-flow:row wrap;       
                        align-items:center;     
                        justify-content:space-between;		
												background:#efeff4;	                                                                 
                        .youlikeList{
                                width:49.5%;
                                display:flex;
                                flex-flow:column;                              
                                align-items:center;  
                                position:relative;
																border: 0.01rem solid #eeeeee;						
																margin-top:0.08rem;
																background:#fff;                          
                                img:first-child{
                                    width:3.55rem;
                                    height:3.35rem;
                                    margin-bottom:0.2rem;                                      
                                    border-radius:0.15rem;                                            
                                }
                                img:last-child{
																		position:absolute;
																		right:0.2rem;
																		bottom:0.2rem;
																		width:0.4rem;
																		height:0.35rem;
																}
                                h2{
                                    width: 3.55rem;
																		height:0.32rem;
																		font-size: 0.18rem;
																		text-align: center;							
																		color: #EC2121;
																		margin-top: -0.5rem;
																		letter-spacing: 0.02rem;
																		font-weight:bold;                                            
                                }
                                h3{
                                    width: 3.35rem;
																		height: 0.8rem;
																		font-size: 0.18rem;
																		color: #000000;
																		text-align: center;
																		letter-spacing: 0.02rem;	
																		font-weight:bold;						
																		/*让文字只显示2行，其余用...代替start*/
																		overflow: hidden;
																		text-overflow: ellipsis;
																		display: -webkit-box;
																		-webkit-line-clamp: 2;
																		-webkit-box-orient: vertical;
																		/*让文字只显示2行，其余用...代替end*/
                                }
                                p{
                                    width:3.35rem;                                
                                    font-size:0.18rem;
                                    color:#EC2121;
                                    text-align:left;
                                    margin-bottom:0.2rem;
                                    letter-spacing:0.01rem;
                                    font-weight:bold;
                                }
                        }
                }
        }
        .carAttr{
            width:7.5rem;
            height:6.0rem;            
            .attrTop{
                 width:7.5rem;
                 height:1.8rem;
                 display:flex;
                 .borderBFu(#d6d6d6);                 
                 .attrImg{
                     width:1.45rem;
                     height:1.8rem;
                     img{
                        width:1.45rem;
                        height:1.8rem;
                     }
                 }
                 .attrText{
                     width:5.2rem;
                     height:1.8rem;                  
                     .attrPrice{
                         width:5.2rem;
                         height:0.9rem;
                         display:flex;
                         flex-flow:column;
                         justify-content:center;                         
                         p{                             
                            font-size:0.32rem;
                            align-self:flex-start;
                            color:#ec2121;
                            text-indent:0.15rem;
                         }
                     }
                     .attrShows{
                     		width:6rem;                     		
                     		display:flex;
                        align-items:center;
                     		.attrSelected{                     		 
                         height:0.9rem;
                         display:flex;
                         flex-flow:column;
                         justify-content:center;
                         p{                             
                            font-size:0.28rem;
                            align-self:flex-start;
                            color:#ec2121;
                            text-indent:0.15rem;
                         }
                     }
                     .attrColors{                                                   
                         display:flex;                         
                         justify-content:center;
                         align-items:center;                                              
                         p{
                            font-size:0.26rem;
                            align-self:center;                            
                            color:#000000;      
                            margin-left:0.1rem;                      
                         }
                     }
                     }
                     
                 }
                 .attrUndo{
                     width:0.85rem;
                     height:1.8rem;                     
                     display:flex;
                     flex-flow:column;
                     justify-content:flex-start;
                     img{
                        width:0.54rem;
                        height:0.54rem;    
                        align-self:center;
                        margin-top:0.15rem; 
                     }
                 }
            }
            .attrChange{
                 width:7.5rem;
                 height:3.25rem;
                 padding: 0 0.2rem;
                 box-sizing: border-box;   
                 overflow:auto;                 
                 .changeUp{
                    width: 100%;
                     /* height:2.25rem;  */   
                     margin-bottom: 0.15rem;                 
                     .upColor{
                         height:0.55rem;
                         display:flex;
                         flex-flow:column;
                         justify-content:space-around;                         
                         p{
                             font-size:0.26rem;
                             align-self:flex-start;
                             text-indent:0.2rem;
                             color:black;
                         }
                     }
                     .changeColors{                            
                         display:flex;
                         flex-flow:row wrap;
                         justify-content:flex-start;                         
                         .cls{                                          	              
                            padding: 0.1rem 0.2rem;
                            display:flex;
                            flex-flow:column;
                            justify-content:center;
                            align-self:flex-start;      
                            background:#efeff4;
                            border-radius:0.4rem;
                            margin-left:0.2rem;  
                            margin-top:0.14rem;                        
                            p{                                
                                font-size:0.26rem;                                                                                                                                  
                                color:#000000;                                    
                            }
                            .textWhite{
                                color:#ffffff;                                    
                            }
                         }
                         .bRed{
                            background:#ec2121;                                 
                         }                         
                     }
                 }
                 .changeDown{
                     width:7.5rem;
                     height:1.5rem;    
                     display:flex;
                     .quantity{
                         width:5rem;
                         height:1.5rem;                         
                         p{
                             font-size:0.26rem;
                             text-align:left;
                             text-indent:0.2rem;
                             color:#aaaaaa;
                         }
                     }
                     .numFlow{
                         width:2.5rem;
                         height:1.5rem;                         
                         display:flex;
                         justify-content:space-around;
                         .reduce{
                             width:0.6rem;
                             height:0.6rem;
                             background:#d6d6d6;
                             font-size:0.26rem;    
                             line-height:0.6rem;
                         }
                         .oNum{
                             height:0.6rem;
                             font-size:0.30rem;   
                             line-height:0.6rem;
                             color:black;
                         }
                         .plus{
                             width:0.6rem;
                             height:0.6rem;
                             background:#d6d6d6;
                             font-size:0.26rem;  
                             line-height:0.6rem;
                         }
                     }
                 }
            }
            .attrButton{
                 width:7.5rem;
                 height:0.88rem;   
                 background:#ec2121;
                 position: absolute;
                 bottom: 0;
                 line-height: 0.88rem;
                 p{
                    color:#ffffff;
                    letter-spacing:0.2rem;
                    font-size:0.34rem;
                    align-self:center;
                 }
            }
        }
    }
    
.shoppingCartActive{
  overflow: hidden;
}
.shopCartActive{
  padding-top: 0.88rem;
}
</style>
